<template>
  <div id="role">
    <!--条件查询-->
    <el-form :inline="true" :model="searchObj" ref="formList" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="searchObj.name" placeholder="请输入角色名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryBtn">查询</el-button>
        <el-button @click="resetForm('formList')">
          <i class="el-icon-refresh-right"></i>
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <!--新增-->
    <el-button type="primary" plain @click="dialogVisible = true">
      <i class="el-icon-user-solid"></i>
      新增角色
    </el-button>
    <el-button type="warning" plain @click="/*delsBtn*/">
      <i class="el-icon-delete-solid"></i>
      批量删除
    </el-button>


    <!--新增角色-->
    <el-dialog
        title="新增角色"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
    >
      <el-form label-width="80px"  ref="form" :model=role >
        <el-form-item label="角色名称">
          <el-input v-model="role.name" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色编码">
          <el-input v-model="role.code" placeholder="请输入角色编码"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入内容"
              v-model="role.remark">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </span>
    </el-dialog>

    <!--数据表格-->
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="编号">
      </el-table-column>
      <el-table-column
          prop="name"
          label="角色名">
      </el-table-column>
      <el-table-column
          prop="code"
          label="编码">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="描述">
      </el-table-column>
      <el-table-column
          prop="status"
          label="禁用/启用">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="0"
              :inactive-value="1"
              @change="switchStatus(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>

      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
              @click="assignMenu(scope.row.id)"
              type="text"
              size="small"
              icon="el-icon-user-solid">
            分配菜单
          </el-button>
          <el-button
              @click="assignPermission(scope.row.id)"
              type="text"
              size="small"
              icon="el-icon-user-solid">
            分配权限
          </el-button>

          <el-button
              @click="/*updateStaff(scope.row.id)*/"
              type="text"
              size="small"
              icon="el-icon-edit">
            修改
          </el-button>
          <el-button
              @click="/*delStaff(scope.row)*/"
              type="text"
              size="small"
              icon="el-icon-delete">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <router-view @query="queryBtn()"></router-view>
    <!--分页组件-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizeList"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Role",
  data() {
    return{
      //新增角色对象
      role: {},
      //新增对话框变量
      dialogVisible: false,
      //批量选中的row
      multipleSelection: [],
      //查询条件对象
      searchObj: {
        name: ""
      },
      // 当前页号
      currentPage: 1,
      // 当前页大小
      pageSize: 5,
      // 总记录数
      total: 10,
      // 页大小列表
      pageSizeList: [2, 5, 10, 20],
      // 返回数据对象
      tableData: [],
    }
  },
  methods: {
    //关闭新增角色对话框
    handleClose() {
      this.dialogVisible = false;
    },
    //分配权限
    assignPermission() {
      this.$router.push({ path: '/assignPermission', query: { id: roleId } })
    },
    //分配菜单
    assignMenu(roleId) {
      this.$router.push({ path: '/assignMenu', query: { id: roleId } })
    },
    //新增角色
    async addRole() {
      const { data: res } = await this.$http.post(`/backRole/addRole`,this.role);
      this.$message.success(res)
      this.dialogVisible = false
      this.queryBtn();
    },
    //查询
    async queryBtn() {
      const { data: res } = await this.$http.post(`/backRole/getBackRolePage/${this.currentPage}/${this.pageSize}`,this.searchObj);
      this.tableData = res.rows;
      this.total = res.total
    },
    //启用/禁用角色
    async switchStatus(row) {
      const result = await this.$http.post('/backRole/switchStatus',row);
      if(result.status === 200)
        this.$message.success(result.data)
    },
    //重置
    resetForm(formName) {
      console.log(formName)
      console.log(this.$refs[formName])
      this.$refs[formName].resetFields();
    },
    //页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.queryBtn()
    },
    //当前页改变
    handleCurrentChange(val){
      this.currentPage = val
      this.queryBtn()
    },
    //批量选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  created() {
    this.queryBtn();
  }
}
</script>

<style scoped>

</style>